<template>
	<view class="c-clockininfo">
		<view class="c-info-count">
			<view class="count-title">
				{{cMonth}}月汇总
			</view>
			<view class="count-items">
				<view class="item">
					<block v-for="(item,index) in cMonthData" :key="index">
						<view class="item-sum">
							<view class="num">{{item.sum}}</view>
							<view v-show="index==0">迟到(次)</view>
							<view v-show="index==1">早退(次)</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="c-info-calendar">
			<view class="">
				<uni-calendar :showMonth="false" :insert="true" :lunar="false" @change="change">
				</uni-calendar>
			</view>
			<view class="calendar-line"></view>
			<block v-for="idx in maxIndex">
				<view class="c-calendar-items">
					<block v-for="(item,index) in filterData(items,idx)" :key="index">
						<view class="item-title">
							<view :class="index==0?'circle':'circle2'"></view>
							<view class="calendar-circle-line"></view>
							<view class="item-name">
								{{item.ClockSchedulingID_Name}}
							</view>
							<view class="item-status">
								{{(item.ClockTime=="")?clockinStatus[0]:clockinStatus[1]}}
							</view>
						</view>
						<view class="item-action">
							<view @click="onClockinLater(item)" class="action-btns" v-show="item.ClockTime==''">
								申请补打
							</view>
							<view class="action-time" v-show="item.ClockTime!=''">
								已于 <text>{{ _retFormatTime(item.ClockTime)}}</text> 完成{{item.ClockClass>1?"补卡":"打卡"}} ！
							</view>
						</view>
					</block>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	let pageApp = getApp();
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	export default {
		data() {
			return {
				items: [],
				cMonthData: [],
				cMonth: (new Date()).getMonth() + 1,
				cMonthMd: (new Date()).getFullYear() + "-" + ((new Date()).getMonth() + 1),
				cMonthYmdhms: (new Date()).getFullYear() + "-" + ((new Date()).getMonth() + 1) + "-" + (new Date()).getDate(),
				maxIndex: 0,
				clockinStatus: ["未打卡", "已打卡"]
			}
		},
		onShow: function(options) {
			// 获取当月的汇总
			this.getCurMonthCount(this.cMonthMd)
			// 获取当天的打卡数据
			this.getDayClockinList("");
		},
		methods: {
			// 获取当月汇总
			getCurMonthCount(ym) {
				// 准备请求数据
				let apiData = {
					url: pageApp.globalData.url + "/EmployeeClockinSum",
					data: {
						"YearMonth": ym
					},
					success: (d) => {
						// console.log("返回数据", d);
						this.cMonthData = d.data.data.items;
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			},
			// 过滤日期格式
			_retFormatTime(v) {
				return this.retFormatTime(v)
			},
			// 过滤打卡数据
			filterData(items, i) {
				let _items = [];
				switch (i) {
					case 1:
						_items.push(items[i - 1], items[i])
						break;
					case 2:
						_items.push(items[i], items[i + 1])
						break;
					case 3:
						_items.push(items[i + 1], items[i + 2])
						break;
				}
				return _items;
			},
			// getDayClockinList
			getDayClockinList(ClockinDate) {
				// 准备请求数据
				let apiData = {
					url: pageApp.globalData.url + "/EmployeeClockinList",
					data: {
						"ClockinDate": ClockinDate
					},
					success: (d) => {
						// console.log("返回数据",d);
						this.items = d.data.data.items;
						this.maxIndex = this.items.length / 2;
					}
				}
				// 发送数据请求
				this.vjAjaxData(apiData);
			},
			// 点击某天时触发
			change(e) {
				// console.log(e);
				this.getDayClockinList(e.fulldate);
				// 更新月字符串
				this.cMonth = e.month;
				// 更新年月字符串
				this.cMonthMd = e.year + "-" + e.month;
				// 更新年月日字符串
				this.cMonthYmdhms = e.year + "-" + e.month + "-" + e.date;
				// 获取当月的汇总
				this.getCurMonthCount(this.cMonthMd)
			},
			// 申请补卡功能
			onClockinLater(item) {
				let c_cls = 2;
				uni.navigateTo({
					url: "./ClockinLater?source=ClockinHistory&c_cls=" + c_cls + "&c_id=" + item.ClockSchedulingID + "&later_time=" + this.cMonthYmdhms
				})
			}
		},
		components: {
			uniCalendar
		},
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}
	.c-clockininfo{
		overflow: hidden;
	}
	.c-info-count {
		background-color: #ffffff;
		margin: 20rpx 26rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		font-weight: 700;
		font-size: 34rpx;
	}

	.c-info-count .count-items {
		margin-top: 30rpx;
	}

	.c-info-count .count-items .item {
		display: flex;
		justify-content: space-around;
		text-align: center;
		font-weight: normal;
	}

	.item-sum .num {
		margin-bottom: 30rpx;
		font-size: 42rpx;
		font-weight: 700;
		color: #000000
	}

	.c-info-calendar {
		background-color: #ffffff;
		margin: 20rpx 26rpx;
		padding: 20rpx 0;
		border-radius: 16rpx;
	}

	.calendar-line {
		border-bottom: solid 2rpx #E5E5E5;
	}
	
	.c-calendar-items {
		padding: 24rpx 50rpx;
		position: relative;
		top: 40rpx;
		height: 320rpx;
		margin-bottom: 40rpx;
		left: 40rpx;
	}

	.c-calendar-items .circle {
		width: 26rpx;
		height: 26rpx;
		left: -15rpx;
		top: -10rpx;
		border-radius: 50%;
		background-color: #798289;
		position: absolute;
	}

	.c-calendar-items .circle2 {
		width: 26rpx;
		height: 26rpx;
		left: -15rpx;
		top: 195rpx;
		border-radius: 50%;
		background-color: #798289;
		position: absolute;
	}
	
    .calendar-circle-line {
    	border-left: solid 6rpx #E5E5E5;
		height: 170rpx;
		left: -6rpx;
		top:22rpx;
		position: absolute;
    }
	.item-title {
		display: flex;
		margin-top: -40rpx;
		font-weight: 700;
	}

	.item-name {
		margin-right: 16rpx;
	}

	.item-status {
		font-weight: normal;
		font-size: 26rpx;
	}

	.item-action {
		margin: 20rpx 0 120rpx 0;
	}

	.action-btns {
		border: solid 4rpx #4497e1;
		color: #4497e1;
		border-radius: 16rpx;
		width: 160rpx;
		text-align: center;
	}

	.action-time text {
		color: #4497e1;
		font-weight: 700;
		margin: 0 1 0rpx;
	}
</style>
